<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model.trim="query.menuName" clearable placeholder="请输入菜单名称" @keyup.enter.native="search" />
      <el-input v-model.trim="query.opcontent" placeholder="请输入内容" @keyup.enter.native="search" />
      <el-select v-model.trim="query.logLevel" placeholder="请选择日志级别" clearable>
        <el-option v-for="item in level" :key="item.key" :label="`${item.name}`" :value="item.index" />
      </el-select>
      <el-select v-model.trim="query.opType" placeholder="请选择操作类型" clearable>
        <el-option v-for="item in type" :key="item.key" :label="`${item.name}`" :value="item.index" />
      </el-select>
      <el-select v-model="query.userId" clearable filterable placeholder="请选择用户">
        <el-option v-for="user in users" :key="user.iid" :label="user.realName + ' ' + ' ' + user.tel" :value="user.iid" />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <el-table v-loading="loading" :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      highlight-current-row :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
      border>
      <el-table-column width="100" prop="ip" label="ip" sortable />
      <el-table-column width="130" prop="menuName" label="菜单名称" sortable />
      <el-table-column width="120" prop="logLevelName" label="日志级别" sortable />
      <el-table-column width="110" prop="opTypeName" label="操作类型" sortable />
      <el-table-column prop="opcontent" label="内容" sortable />
      <el-table-column width="160" prop="opcontent" label="创建时间" sortable>
        <template slot-scope="{row}">
          <span>{{ row.optime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column width="90" prop="userName" label="用户名" sortable />
    </el-table>
    <el-pagination v-show="total > 0" style="margin-top:20px;" :current-page="query.pageIndex"
      :page-sizes="[5, 10, 20, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import { getAllInfo, announceQuery } from '@/api/systemLog'
import { getList as getUserList } from '@/api/user'
import { deepClone, arraryRemove } from '../../../utils'
export default {
  name: 'SystemLog',
  data() {
    return {
      loading: true,
      currentPage: 1,
      pagesize: 10,
      users: [],
      type: [{
        name: '新增',
        index: 1
      },
      {
        name: '修改',
        index: 2
      },
      {
        name: '删除',
        index: 3
      },
      {
        name: '导入',
        index: 4
      },
      {
        name: '确认',
        index: 5
      },
      {
        name: 'WS请求',
        index: 6
      }
      ],
      level: [{
        name: '调试',
        index: 0
      },
      {
        name: '信息',
        index: 1
      },
      {
        name: '异常',
        index: 2
      }],
      query: {
        opcontent: '',
        userId: '',
        opType: '',
        menuName: '',
        logLevel: '',
        pageSize: 10,
        pageIndex: 1
      },
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getInfor()
    this.getUserList()
  },
  methods: {
    handleSizeChange(size) {
      this.query.pageSize = size
    },
    handleCurrentChange(currentPage) {
      this.query.pageIndex = currentPage
    },
    getUserList() {
      getUserList().then((res) => {
        this.users = res.data
      })
    },
    search() {
      this.getInfor()
    },
    checkSpecialKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;'\\[\\]<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false
        }
      }
      return true
    },

    getInfor() {
      const obj = deepClone(this.query)
      obj.opcontent = obj.opcontent.toString()
      if (!this.checkSpecialKey(obj.opcontent)) {
        this.$message({
          type: 'warning',
          message: '不能带有特殊字符，例如[]'
        })
        return false
      }
      this.loading = true
      getAllInfo(obj)
        .then(res => {
          this.tableData = res.data.items
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
